<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>inote 云记事</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../css/container.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/bar.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/mic.css"/>
    <style>
        html,body{
            height: 100%;
        }
        #wrap{
            height: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            width: 100%;
        }
        #header{
            position: relative;
        }
        #main{
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            z-index: 0;
        }
        #footer{
            width: 100%;height: 56px;
            background-color: #fff;
            border-top: 1px solid rgba(0,0,0,0.12);
            z-index: 100;
        }
        .edit-menu{
            text-align: center;
        }
        .edit-menu > img{
            width: 24px;
            margin-top: 16px;
        }
        .menuActive{
            background: rgba(0,0,0,0.12);
        }
        .css-test{
            width: 50px;
            height: 50px;
            margin-top: 10px;
            background-color: #2196F3;
            border-radius: 100%;
        }
        .tabActive{
            background-color: #42A5F5;
        }
        .hide{
            display: none;
        }
        .play_arrow{
            background: url(../image/png/edit/play_arrow.png) no-repeat center;
            background-size: 24px 24px;
        }
        .stop{
            background: url(../image/png/edit/stop.png) no-repeat center;
            background-size: 24px 24px;
        }
        .start-mic{
            position: absolute;
            background-color: #fff;
            padding: 20px;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            top: 0px;bottom: 0px;left: 0px;right: 0px;
            margin: auto;
        }
        .mic-time{
            position: absolute;
            display: table;
            width: 100%;
            height: 50%;
            bottom: 0px;
            padding-top: 140px;
            text-align: center;
            font-size: 20px;
        }
        .mic-check{
            position: absolute;
            top: 0px;
            right: 0px;
            width: 28px;
            padding: 15px;
        }
        .con{
            position: relative;
            position: absolute;
            top: 0px;bottom: 0px;left: 0px;right: 0px;
            margin: auto;
            width: 142px;
            height: 142px;
        }
        .checkActive{
            background-color: #42A5F5;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header" class="ino-bar home-bar">
            <div class="title">录音</div>
            <table class="ino-bar-content">
                <tr>
                    <td>
                        <div class="bar-tab bar-tab-back" tapmode="tabActive" onclick="api.closeWin();">
                            <img class="listTab" src="../image/png/webpage/arrow_back.png">
                        </div>                        
                    </td>
                </tr>
            </table>
        </div>
        <div id="main">
            
            <div class="start-mic">
                <img src="../image/png/voice/micb.png" width="100"> 
            </div>
            <div class="con">
                <div class="circle1"></div>
                <div class="circle2"></div>
            </div>
        </div>
        <div id="footer" class="in-container">
            <div class="in-col-1 edit-menu" tapmode="menuActive" onclick="share()">
                <img src="../image/png/edit/share.png">
            </div>
            <div id="play" class="in-col-1 edit-menu play_arrow" tapmode="menuActive" onclick="clickToPlay()">
            </div>
            <div class="in-col-1 edit-menu" tapmode="menuActive" onclick="clickDelete()">
                <img src="../image/png/edit/delete.png">
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var c=0;
    var t;
    function timedCount( time ) {
        
        Number.prototype.formatTime=function(){
            // 计算
            var h=0,i=0,s=parseInt(this);
            if(s>60){
                i=parseInt(s/60);
                s=parseInt(s%60);
                if(i > 60) {
                    h=parseInt(i/60);
                    i = parseInt(i%60);
                }
            }
            // 补零
            var zero=function(v){
                return (v>>0)<10?"0"+v:v;
            };
            return [zero(h),zero(i),zero(s)].join(":");
        };
        document.getElementById('txt').innerHTML=Number(c).formatTime();
        if (c === time+1) {
            c = 0;
            document.getElementById('txt').innerHTML=Number(0).formatTime();
            return;
        };
        c=c+1;
        t=setTimeout("timedCount("+time+")",1000);
    };

    function startPlay( src ) {
        api.startPlay({
            path: src
        },function( ret, err ){
            if( ret ){
                // alert( JSON.stringify( ret ) );
                // 播放完成后的回调
                var circle1 = $api.dom('.circle1');
                var circle2 = $api.dom('.circle2');
                $api.removeCls(circle1, 'animated');
                $api.removeCls(circle2, 'animated');
                api.sendEvent({
                    name: 'playComplete',
                });
            }else{
                // alert( JSON.stringify( err ) );
            }
        });
    };
	apiready = function(){
		var id = api.pageParam.id;
        var detail = api.pageParam.detail;

        api.addEventListener({
            name: 'playComplete'
        }, function( ret, err ){
            if( ret ){
                // alert( JSON.stringify( ret ) );
                $api.addCls(play, 'play_arrow');
                $api.removeCls(play, 'stop');
            }
        });

        var detailArray = detail.split(',');
        var src = detailArray[0];
        var time = detailArray[1];
        var circle1 = $api.dom('.circle1');
        var circle2 = $api.dom('.circle2');
        var fs = api.require('fs');
        
        api.addEventListener({
            name: 'clickToPlay'
        }, function( ret, err ){
            if( ret ){
                // alert( JSON.stringify( ret ) );
                startPlay(src);
                // timedCount(time);
                $api.addCls(circle1, 'animated');
                $api.addCls(circle2, 'animated');
                
            }else{
                // alert( JSON.stringify( err ) );
            }
        });
        api.addEventListener({
            name: 'stopPlay'
        }, function( ret, err ){
            if( ret ){
                // alert( JSON.stringify( ret ) );
                api.stopPlay();
                // timedCount(0); 
                $api.removeCls(circle1, 'animated');
                $api.removeCls(circle2, 'animated');           
            }else{
                // alert( JSON.stringify( err ) );
            }
        });
        // 删除的操作
        api.addEventListener({
            name: 'delete'
        }, function(ret, err){
            if( ret ){
                fs.remove({
                    path: src
                },function( ret, err ){        
                    if( ret.status ){
                        deleteText();
                    }
                });
                
            }else{
                // alert( JSON.stringify( err ) );
            }
        });
        function deleteText() {
            var db = api.require('db');
            db.openDatabase({
                name: 'inote',
                path: 'fs://inote.db'
            }, function(ret, err){
                if(ret.status){
                    // 相关的操作放在这里
                    del(id);
                }
            });
        };
        function executeSql(sql) {
            var db = api.require('db');
            db.executeSql({
                name: 'inote',
                sql: sql
            }, function(ret, err){
                if(ret.status){
                    api.openWin({
                        name: 'root',
                        reload: true
                    });
                    api.closeWin();
                }
            });
        };
        function del(id) {
            var sql = "DELETE FROM Text WHERE id = '"+id+"'";
            executeSql(sql);
        };
	};

    function share() {
        // 分享
        var detailArray = api.pageParam.detail.split(',');
        var src = detailArray[0];
        var time = detailArray[1];

        var sharedModule = api.require("shareAction");
        var sharedMsg = {
            type : "audio",
            path : src
        };
        sharedModule.share(sharedMsg);
    };
    function clickToPlay() {
        var play = $api.dom('#play');
        if ($api.hasCls(play, 'play_arrow')) {
            $api.removeCls(play, 'play_arrow');
            $api.addCls(play, 'stop');
            api.sendEvent({name: 'clickToPlay'});
        }else{
            $api.addCls(play, 'play_arrow');
            $api.removeCls(play, 'stop');
            api.sendEvent({name: 'stopPlay'});
        }
    };
    function clickDelete() {
        api.openFrame({
            name: 'delete',
            url: 'delete.html',
            bounces: false,
            bgColor: 'rgba(0,0,0,0.4)',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    };

</script>
</html>